/* all tag */
* {
font-family: 'Microsoft YaHei';
font-size: 1.5625vw;
margin: 0;
padding: 0;
border: none;
}

html,body {
height: 100%;
overflow: hidden;
}
/* music */
.music {
position: fixed;
z-index: 5;
top: 3vh;
right: 4vw;
width: 15vw;
height: 15vw;
border: 4px solid #ef1639;
border-radius: 50%;
background: #fff;
}


div.music>img.music_pointer {
position: absolute;
top: 24%;
right: 2.5%;
width: 28.421%;
z-index: 1;
}
.music>img.music_disc {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 79%;
margin: auto;
z-index: 0;
}
.music>img.play{
	-webkit-animation: music_disc 4s linear infinite;
	     -o-animation: music_disc 4s linear infinite;
	        animation: music_disc 4s linear infinite;
}
@-webkit-keyframes music_disc {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes music_disc {
    0% {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

/* page bg */
div.page {
position: absolute;
width: 100%;
height: 100%;
}

div.page>div.bg {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}

/* page1 */
#page1 {
display: block;
}

#page1>.bg {
background: url('../img/p1_bg.jpg') no-repeat center center;
background-size: 100%;
}

#page1>.p1_lantern {
font-size: 3.506rem;
position: absolute;
z-index: 0;
top: -3.4%;
right: 0;
left: 0;
width: 45vw;
height: 71.2vh;
margin: auto;
padding-top: 31vh;
text-align: center;
color: #fff;
background: url('../img/p1_lantern.png') no-repeat bottom center;
background-size: 100%;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

#page1>.p1_lantern:before {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 30vw;
height: 30vw;
margin: auto;
content: '';
opacity: .5;
border-radius: 50%;
background: #d60b3b;
-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
-o-box-shadow: 0 0 10vw 10vw #d60b3b;
box-shadow: 0 0 10vw 10vw #d60b3b;
-webkit-animation: p1_lantern_flash .5s infinite alternate;
-o-animation: p1_lantern_flash .5s infinite alternate;
animation: p1_lantern_flash .5s infinite alternate;
}
@-webkit-keyframes p1_lantern_flash{
	0%{
		opacity: .5;
		-webkit-transform: scale(.8,.8);
	}
	100%{
		opacity: 1;
	}
}
@keyframes p1_lantern_flash{
	0%{
		opacity: .5;
		-webkit-transform: scale(.8,.8);
		   -moz-transform: scale(.8,.8);
		    -ms-transform: scale(.8,.8);
		     -o-transform: scale(.8,.8);
		        transform: scale(.8,.8);
	}
	100%{
		opacity: 1;
	}
}

#page1>div.p1_imooc {
position: absolute;
right: 0;
bottom: 9.2vh;
left: 0;
width: 27.656vw;
height: 18.63vh;
margin: auto;
background: url('../img/p1_imooc.png') no-repeat center center;
background-size: 100%;
}

#page1>div.p1_words {
font-size: 2.134rem;
position: absolute;
right: 0;
bottom: 48px;
left: 0;
text-align: center;
color: #231815;
}
/* page2 */
#page2 {
display: none;
	-webkit-transition: .5s;
	   -moz-transition: .5s;
	    -ms-transition: .5s;
	     -o-transition: .5s;
	        transition: .5s;
}
#page2>.p2_bg_loading{
	z-index: 4;
	background: #ef1639;
	-webkit-animation: p2_bg_loading 1s linear forwards;
	-o-animation: p2_bg_loading 1s linear forwards;
	animation: p2_bg_loading 1s linear forwards;
}
@-webkit-keyframes p2_bg_loading{
	0% {
        opacity: 1;
    }
    100% {
       opacity: 0;
    }
}
@keyframes p2_bg_loading{
	0% {
        opacity: 1;
    }
    100% {
       opacity: 0;
    }
}

#page2>.bg {
background: url('../img/p2_bg.jpg') no-repeat center center;
background-size: 100%;
}
#page2.fadeout{
    transform: translate(0,-100%);
    -ms-transform: translate(0,-100%); 
    -webkit-transform: translate(0,-100%); 
    -o-transform: translate(0,-100%); 
    -moz-transform: translate(0,-100%);  
    opacity: .3; 
}
#page2>div.p2_circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 59.375vw;
height: 59.375vw;
margin: auto;
background: url('../img/p2_circle_outer.png') no-repeat center center;
background-size: 100%;
-webkit-animation: p2_circle_outer 1s linear 3s infinite;
-o-animation: p2_circle_outer 1s linear 3s infinite;
animation: p2_circle_outer 1s linear 3s infinite;
}
@-webkit-keyframes p2_circle_outer{
	0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}
@keyframes p2_circle_outer{
	0% {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
             -o-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}

#page2>div.p2_circle:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 45.625vw;
height: 45.625vw;
margin: auto;
background: url('../img/p2_circle_middle.png') no-repeat center center;
background-size: 100%;
content: "";
-webkit-animation: p2_circle_middle 1s linear 2s infinite;
-o-animation: p2_circle_middle 1s linear 2s infinite;
animation: p2_circle_middle 1s linear 2s infinite;
}
@-webkit-keyframes p2_circle_middle{
	0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(720deg);
                transform: rotate(720deg);
    }
}
@keyframes p2_circle_middle{
	0% {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(720deg);
            -ms-transform: rotate(720deg);
             -o-transform: rotate(720deg);
                transform: rotate(720deg);
    }
}

#page2>div.p2_circle:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 39.375vw;
height: 39.375vw;
margin: auto;
background: url('../img/p2_circle_inner.png') no-repeat center center;
background-size: 100%;
content: "";
-webkit-animation: p2_circle_inner 1s linear 1s infinite;
-o-animation: p2_circle_inner 1s linear 1s infinite;
animation: p2_circle_inner 1s linear 1s infinite;
}
@-webkit-keyframes p2_circle_inner{
	0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
                transform: rotate(-1080deg);
    }
}
@keyframes p2_circle_inner{
	0% {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
            -ms-transform: rotate(-1080deg);
             -o-transform: rotate(-1080deg);
                transform: rotate(-1080deg);
    }
}

#page2>div.p2_2016 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 27.5vw;
height: 6.24vh;
margin: auto;
background: url('../img/p2_2016.png') no-repeat center center;
background-size: 100%;
}

/* page3 */
#page3 {
display: none;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

#page3>.bg {
background: url('../img/p3_bg.jpg') no-repeat center center;
background-size: 100%;
}
#page3.fadein{
    transform: translate(0,-100%);
    -ms-transform: translate(0,-100%); 
    -webkit-transform: translate(0,-100%); 
    -o-transform: translate(0,-100%); 
    -moz-transform: translate(0,-100%);  
}
#page3>div.p3_logo {
position: absolute;
top: 7.82vh;
right: 0;
left: 0;
width: 34.6875vw;
height: 6.327vh;
margin: auto;
background: url('../img/p3_logo.png') no-repeat center center;
background-size: 100%;
}

#page3>div.p3_title {
position: absolute;
top: 21vh;
right: 0;
left: 0;
width: 48.125vw;
height: 50vh;
margin: auto;
background: url('../img/p3_title.png') no-repeat center center;
background-size: 100%;
}

#page3>div.p3_couplet_second {
position: absolute;
top: 25.48vh;
left: 3.75vw;
width: 22.8125vw;
height: 41.652vh;
background: url('../img/p3_couplet_second.png') no-repeat center center;
background-size: 100%;
}

#page3>div.p3_couplet_first {
position: absolute;
top: 25.48vh;
right: 3.75vw;
width: 22.8125vw;
height: 41.652vh;
background: url('../img/p3_couplet_first.png') no-repeat center center;
background-size: 100%;
}

#page3>div.p3_blessing {
position: absolute;
right: 0;
bottom: 10vh;
left: 0;
width: 32vw;
height: 32vw;
margin: auto;
background: url('../img/p3_blessing.png') no-repeat center center;
background-size: 100%;
-webkit-animation: p3_blessing 2s linear infinite;
-o-animation: p3_blessing 2s linear infinite;
animation: p3_blessing 2s linear infinite;
}

@-webkit-keyframes p3_blessing{
	0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes p3_blessing{
	0% {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}